<template>
    <div >
        <div class="router-nav">
            <div class="my-nav">
                <a  @click="nav_a" :class="active==1?'size':'no-size'">全部排行</a>
                <a  @click="nav_b" :class="active==2?'size':'no-size'">原创</a>
                <a  @click="nav_c" :class="active==3?'size':'no-size'">悬疑</a>
                <a  @click="nav_d" :class="active==4?'size':'no-size'">女性</a>
                <a  @click="nav_e" :class="active==5?'size':'no-size'">幻想</a>
                <a  @click="nav_f" :class="active==6?'size':'no-size'">文艺</a>
                <a  @click="nav_g" :class="active==7?'size':'no-size'">历史</a>
                <a  @click="nav_h" :class="active==8?'size':'no-size'">出版</a>
               
            </div>
        </div>
       <router-view></router-view>
    </div> 
</template>
<script>
export default {
   data() {
       return {
           active:1
       }
   },
   methods: {
       nav_a(){
           this.active=1;
           this.$router.push('/charts')
       },
       nav_b(){
           this.active=2;
           this.$router.push('/charts/featured')
       },
       nav_c(){
           this.active=3;
           this.$router.push('/charts/my-stery')
       },
       nav_d(){
           this.active=4;
           this.$router.push('/charts/womens')
       },
       nav_e(){
           this.active=5;
           this.$router.push('/charts/fantasy')
       },
       nav_f(){
           this.active=6;
           this.$router.push('/charts/literary')
       },
       nav_g(){
           this.active=7;
           this.$router.push('/charts/historical')
       },
       nav_h(){
           this.active=8;
           this.$router.push('/charts/ebook')
       }

   },
}
</script>
<style scoped>
    
    .router-nav{
        padding: 0 60px;
    }
    .my-nav{
        margin: 0 auto;
        width: 1200px;
        border-bottom: 0.1px solid gray;
        display: flex;
        justify-content: center;
        
    }
    .router-nav .no-size{
        width: 74px;
        height: 45px;
        text-align: center;
        line-height: 25px;
        font-size: 16px;
        font-weight: normal;
        display: block;
        padding: 10px 20px;
        box-sizing: border-box;
        color: gray;
        cursor: pointer
    }
    .router-nav .no-size:hover{
        color: black;
    }
    .router-nav>.my-nav>.no-size:nth-child(1){
        width: 140px;
        display: block;
    }
    .my-nav .size{
        width: 74px;
        height: 45px;
        text-align: center;
        line-height: 25px;
        font-size: 17px;
        font-weight: bold;
        display: block;
        padding: 10px 20px;
        box-sizing: border-box;
        color: black;
        cursor: pointer
    }
    .router-nav .size:hover{
        color: black;
    }
    .router-nav>.my-nav>.size:nth-child(1){
        width: 140px;
        display: block;
    }
</style>